<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>results</title>
    {% load static %}
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link href="{% static 'myApp/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'myApp/jquery-3.5.1/jquery-3.5.1.js' %}" ></script>
    <script src="{% static 'myApp/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">投票系统</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" id="search_text">
        </div>
        <input type="button" class="btn btn-default" id="search_b" value="搜索"></input>
    </form>
        <ul class="nav navbar-nav">
            <li class="active"><a href="{% url 'myApp:index' %}">首页</a></li>
            <li><a href="{% url 'myApp:myvote' user.uid %}">我的投票</a></li>
        </ul>

        <div style="float: right">
        <ul class="nav navbar-nav">
            <li><a href="{% url 'myApp:logout' %}">注销</a></li>
        </ul>
        </div>
    </div>

</nav>
<div class="row">
<div class="col-md-3" >
<table class="table table-bordered">
  <thead>
    <tr>
      <th>最新投票</th>
  </thead>
  <tbody>
    <tr>
      <td>{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'myApp:detail' question.id %} " class="list-group-item">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}</td>
    </tr>
  </tbody>
</table>
</div>


<div class="col-md-7"  id="search">
<h1>{{ question.question_text }}</h1>

<ul>
{% for choice in question.choice_set.all %}
    {% if choice in user.choice.all%}
        <li class="list-group-item" style="color: #2aabd2">
    {{ choice.choice_text }}--{{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
    {% else %}
        <li class="list-group-item">{{ choice.choice_text }}--{{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
    {% endif %}
{% endfor %}
    <div id="{{ question.question_text }}" style="width: 600px;height:350px"></div>
    <script type="text/javascript">
            var chartDom = document.getElementById('{{ question.question_text }}');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '投票统计',
            subtext: '{{ question.question_text }}',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                  {% for choice in question.choice_set.all %}
                  { value: {{ choice.votes }}, name: '{{ choice.choice_text }}' },
                  {% endfor %}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
        </script>
</ul>
</div>
</div>
<script>
    $("#search_b").click(function (){

        var key=$("#search_text").val()
        $.get("{% url 'myApp:search' %}?key="+key,
            function (result){$("#search").html(result);})

    })
</script>
</body>
</html>